<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Message, readMessage } from "@/api/message";
import { useRoute, useRouter } from "vue-router";
import { message } from "@/utils/message";

defineOptions({
  name: "ViewMessage"
});
const router = useRouter();
const loading = ref<boolean>(false);
const data = ref<Message>({});

onMounted(() => {
  const query = useRoute().query;
  if (query?.id) {
    loading.value = true;
    readMessage(query.id as string)
      .then(res => {
        data.value = res;
        loading.value = false;
      })
      .catch(err => {
        message(err, { type: "error" });
        router.back();
      });
  } else {
    message("无法读取消息:no_query", { type: "error" });
    router.back();
  }
});
</script>

<template>
  <div class="main">
    <ElCard v-loading="loading">
      <template #header>
        <el-row align="middle">
          <el-col :span="6">
            <h1>{{ data.title }}</h1>
          </el-col>
          <el-col :span="6" :offset="12">
            <p class="float-right">
              {{ data.sender }} <br />
              {{ data.sendTime }}
            </p>
          </el-col>
        </el-row>
      </template>
      <el-row style="margin-bottom: 10px" justify="center" align="middle">
        <el-col><div v-html="data.content" /> </el-col>
      </el-row>
      <el-row justify="center" align="middle">
        <el-col>
          <el-button @click="useRouter().back">返回</el-button>
        </el-col>
      </el-row>
    </ElCard>
  </div>
</template>

<style scoped lang="scss"></style>
